<template>
  <div class="box">
    <p class="title">
      PTE课程<span class="tips"></span>
      <router-link to=""  @click.native="toMoreList">更多&gt;</router-link>
    </p>
    <!-- PTE课区域 -->
    <div class="zbcourse">
      <div v-for="(item, index) in courseList" :key="index" class="scaleDiv">
        <router-link to=""
        @click.native="goTo(item.id, item.type)"
          ><img v-lazy="item.image" alt=""
        /></router-link>
        <span class="setcenter">
          <p class="title-intro">{{ item.title }}</p>
          <p class="content">{{ item.memo }}</p>
          <p class="pdl20">
            <span class="teacher"
              ><span>讲师：{{ item.teacherName }}</span></span
            >
            <span class="study-num">{{ item.num }}人已学</span>
          </p>
        </span>
      </div>
    </div>
    <!-- PTE课程路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      courseList: []
    }
  },
  methods: {
    getCourseList () {
      sendPost(api.getCourseList, {
        type: "2",
        offset: 0,
        limit: 4
      }).then(res => {
        // console.log(res);
        this.courseList = res.data
      })
    },
    goTo (id, type) {

      if (type === '1'||type === '2'||type === '3'||type === '4'||type === '5'||type === '6'||type === '7') {
        this.$router.push('cclcourseinfo?id=' + id+"&type="+type)
      }
    },
    toMoreList () {
      this.$router.push('basecourselist?type=2&listName=PTE课程')

    }
  },
  created () {
    this.getCourseList()
    this.goTo()
  },
}
</script>

<style lang="less" scoped>
.scaleDiv:hover {
  transform: translateY(.3125rem);
  box-shadow: 0 0 20px 2px #918f8f; /*盒子阴影*/
}
.box {
  background-color: #e8eaed;
  padding-bottom: 3.125rem;
  box-sizing: border-box;
}
.title {
  width: 75rem;
  margin: auto;
  height: 6.25rem;
  line-height: 6.25rem;
  display: flex;
  font-size: 2.5rem;
  text-align: left;
  justify-content: space-between;
  position: relative;
  a {
    text-decoration: none;
    color: #989799;
    font-size: 1rem;
  }
  .tips {
    position: absolute;
    left: 14.5rem;
    font-size: 1.125rem;
    color: #999;
  }
}
.zbcourse {
  width: 75rem;
  margin: auto;
  display: flex;
  background-color: #e8eaed;
  :last-child{
    margin-right: 0;
  }
  div {
    transition: all 0.3s;
    width: 17.5rem;
    margin-right: 1.6875rem;
    background-color: #fff;
  }
  a {
    display: flex;
    width: 100%;
    height: 10.1875rem;
    background-color: #abcdef;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.content {
  font-size: 0.875rem;
  color: #999;
  line-height: 1.375rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: wrap;
}
.title-intro {
  font-size: 1.25rem;
  color: #666;
  font-weight: 400;
  padding: 0 1.25rem;
  height: 3.4375rem;
  line-height: 3.4375rem;
  box-sizing: border-box;
  text-align: left;
}
.pdl20 {
  display: flex;
  font-size: 0.875rem;
  text-align: left;
  color: #999;
  box-sizing: border-box;
  line-height: 3.125rem;
  justify-content: space-between;
  .teacher {
    padding-left: 1.25rem;
    box-sizing: border-box;
    span {
      height: 1.375rem;
      display: inline-block;
      font-size: 0.875rem;
      color: #ff5e4e;
      background-color: #ffdfdc;
      line-height: 1.25rem;
      text-align: center;
    }
  }
  .study-num {
    padding-right: 1.25rem;
    text-align: right;
    box-sizing: border-box;
  }
}

</style>
